<template>
  <div>
        <van-field
      v-model="username"
      name="手机号"
      label="手机号"
      placeholder="手机号"
      :rules="[{ required: true, message: '请填写手机号' }]"
    />
        <van-field
      v-model="password"
      name="密码"
      label="密码"
      placeholder="密码"
      :rules="[{ required: true, message: '请填写密码' }]"
    />
        <van-field
      v-model="nickname"
      name="用户名"
      label="用户名"
      placeholder="用户名"
      :rules="[{ required: true, message: '请填写用户名' }]"
    />
       <van-field
      v-model="avatar"
      type="url"
      name="头像"
      label="头像"
      placeholder="头像"
      :rules="[{ required: true, message: '请填写头像' }]"
    />
   
    <!-- <input v-model="avatar" type="url" placeholder="头像URL" /> -->
     <Head style="margin-left:4%" @update:imageUrl="imageUrlUpdated"></Head>
      <van-button round block type="primary" @click="register">
      注册
    </van-button>
  </div>
</template>

<script setup lang="ts">
import Head from '../../components/head/index.vue'
import { ref } from 'vue'
import { getregister } from '../../request/http' // 确保路径正确
import { useRouter } from 'vue-router'

const username = ref<string>('')
const password = ref<string>('')
const nickname = ref<string>('')
const avatar = ref<string>('')
const router = useRouter()
const register = async () => {
  const registerData = {
    username: username.value,
    password: password.value,
    nickname: nickname.value,
    avatar: avatar.value
  }

  console.log('注册数据:', registerData) // 打印注册数据
  try {
    const response = await getregister(username.value, password.value, nickname.value, avatar.value)
    const user = localStorage.setItem(
      'user',
      JSON.stringify({
        username: username.value,
        password: password.value,
        nickname: nickname.value,
        avatar: avatar.value
      })
    )
    router.push('/login')
    console.log('注册成功:', response.data)
    // 可以在这里处理注册成功后的逻辑，比如跳转或提示用户
  } catch (error) {
    console.error('注册失败:', error)
    //     // 可以在这里处理注册失败的逻辑，比如提示用户
  }
}

//父组件
const imageUrlUpdated = (url: any) => {
  console.log(url)

  avatar.value = url // 更新 avatar
}
</script>

<style scoped lang="scss">
/* 添加一些样式 */
input{
  width: 90%;
  height: 40px;
  margin-top: 10px; 
  border-radius: 20px;
  margin-left: 4%;
}
button{
  width: 90%;
  height: 40px;
  margin-top: 10px;
  border-radius: 20px;
  border: none;
margin-left: 4%;
}
</style>
